<template>
  <el-row class="row-style">
    <el-col :span="8">
      <el-card>
        <template #header>转盘抽奖</template>
        <div class="card-container">
          <LuckyWheel
            ref="myLucky"
            width="300px"
            height="300px"
            :prizes="prizes"
            :blocks="blocks"
            :buttons="buttons"
            @start="startCallback"
            @end="endCallback"
          />
        </div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card style="margin-left: 10px">
        <template #header>九宫格抽奖</template>
        <div class="card-container">
          <LuckyGrid
            ref="luckyGrid"
            width="300px"
            height="300px"
            :prizes="gridPrizes"
            :blocks="gridBlocks"
            :buttons="gridButtons"
            :defaultStyle="defaultStyle"
            @start="gridStartCallback"
            @end="gridEndCallback"
          />
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { Prize } from "./type";
// 转盘
const myLucky = ref();

// 九宫格
const luckyGrid = ref();

const blocks = [{ padding: "13px", background: "#617df2" }];

const gridBlocks = [
  { padding: "10px", background: "#869cfa" },
  { padding: "10px", background: "#e9e8fe" },
];

const prizes: Prize[] = reactive([
  { fonts: [{ text: "奖品 1", top: "10%" }], background: "#e9e8fe" },
  { fonts: [{ text: "奖品 2", top: "10%" }], background: "#b8c5f2" },
  { fonts: [{ text: "奖品 3", top: "10%" }], background: "#e9e8fe" },
  { fonts: [{ text: "奖品 4", top: "10%" }], background: "#b8c5f2" },
  { fonts: [{ text: "奖品 5", top: "10%" }], background: "#e9e8fe" },
  { fonts: [{ text: "奖品 6", top: "10%" }], background: "#b8c5f2" },
]);

const gridPrizes: Prize[] = reactive([
  { x: 0, y: 0, fonts: [{ text: "0", top: "25%" }] },
  { x: 1, y: 0, fonts: [{ text: "1", top: "25%" }] },
  { x: 2, y: 0, fonts: [{ text: "2", top: "25%" }] },
  { x: 2, y: 1, fonts: [{ text: "3", top: "25%" }] },
  { x: 2, y: 2, fonts: [{ text: "4", top: "25%" }] },
  { x: 1, y: 2, fonts: [{ text: "5", top: "25%" }] },
  { x: 0, y: 2, fonts: [{ text: "6", top: "25%" }] },
  { x: 0, y: 1, fonts: [{ text: "7", top: "25%" }] },
]);

const buttons = [
  {
    radius: "35%",
    background: "#8a9bf3",
    pointer: true,
    fonts: [{ text: "开始", top: "-10px" }],
  },
];

const gridButtons = [
  {
    x: 1,
    y: 1,
    background: "#7f95d1",
    fonts: [{ text: "开始", top: "25%" }],
  },
];

const defaultStyle = { background: "#b8c5f2" };

// 转盘开始的回调
function startCallback() {
  myLucky.value.play();
  // 模拟调用接口异步抽奖
  setTimeout(() => {
    // 假设后端返回的中奖索引是0
    const index = getRandomInt(0, 7);
    // 调用stop停止旋转并传递中奖索引
    myLucky.value.stop(index);
  }, 2000);
}

// 转盘结束的回调
function endCallback(prize: Prize) {
  ElMessage.success(`恭喜您抽中${prize.fonts[0].text}`);
}

function gridStartCallback() {
  luckyGrid.value.play();
  setTimeout(() => {
    const index = getRandomInt(0, 8);
    luckyGrid.value.stop(index);
  }, 2000);
}

function gridEndCallback(prize: Prize) {
  ElMessage.success(`恭喜您抽中${prize.fonts[0].text}`);
}

// 生成一个介于min（包括）和max（不包括）之间的随机整数
function getRandomInt(min: number, max: number) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>

<style scoped>
.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.row-style {
  margin: 10px 0px 0px 10px;
}
</style>
